<style>
.layout-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: #282C30;
  height: auto;
  padding-right: 0;
  padding-left: 0;
}

.layout-body {
  font-family: 楷体;
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-aside {
  background: #ffffff;
}

.layout-aside i {
  color: black !important;
}

.layout-aside span {
  font-size: 17px;
}

.el-menu-item span {
  font-size: 14px;
}

.layout-main {
  background: white;
}

.el-menu-item.is-active {
  background: #CCCCCC !important;
}

.el-icon {
  color: black;
}

.el-divider {
  margin: 0;
}

.layout-header h1 {
  color: #ffffff;
  line-height: 50px;
  font-size: 25px;
  font-weight: bold;
  font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;
}

.userIndex {
  margin-top: 11px;
  margin-left: 21px;
}

.headerTitle {
  text-align: center;
  margin-top: -50px;
}

.titleByEnglish {
  color: white;
  margin-top: -10px;
}

.adminInfo {
  z-index: 166;
  width: auto;
  float: right;
  margin-top: -44px;
}

.admName {
  margin-left: 10px;
  position: relative;
  top: -12px;
  margin-right: 20px;
  color: #CCCCCC;
}

.logout {
  margin-right: 20px;
  position: relative;
  top: -12px;
}

.el-popover {
  min-width: 50px;
}


</style>

<template>
  <div>
    <el-container>
      <el-header class="layout-header">
        <el-popconfirm
            @confirm="userIndex()"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="您确定要返回到前台吗？">
          <el-button class="userIndex" icon="el-icon-caret-left" type="text" slot="reference">退出到前台</el-button>
        </el-popconfirm>

        <div class="headerTitle">
          <h1>社区疫情防控管理系统</h1>
          <h6 class="titleByEnglish">Community epidemic management system</h6>
        </div>
        <div class="adminInfo">
          <el-avatar :size="38" :src="admin.avatar==null || admin.avatar==''?'':require('../views/img/admin/'+admin.avatar)"/>
          <el-button @click="adminCenter()" type="text" class="admName"><h4>{{ admin.admName }}</h4></el-button>
          <el-popconfirm
              @confirm="logout()"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定要退出登录吗？">
            <el-button class="logout" type="text" slot="reference">退出登录</el-button>
          </el-popconfirm>
        </div>
      </el-header>

      <el-container class="layout-body">
        <el-aside class="layout-aside">
          <el-menu
              router
              :default-active="activeMenuItemPath"
              class="el-menu-vertical-demo"
              background-color="#ffffff"
              text-color="black"
              active-text-color="black">

            <el-menu-item index="/sys-admin/Center">
              <i class="el-icon-user-solid"></i>
              <span style="font-size: 17px">个人中心</span>
            </el-menu-item>
            <el-divider></el-divider>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>管理员/用户管理</span>
              </template>
              <el-menu-item index="/sys-admin/admin">
                <i class="el-icon-user-solid"></i>
                <span>管理员</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/user">
                <i class="el-icon-user"></i>
                <span>用户</span>
              </el-menu-item>
            </el-submenu>
            <el-divider></el-divider>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span>前台首页管理</span>
              </template>
              <el-menu-item index="/sys-admin/notice">
                <i class="el-icon-chat-dot-round"></i>
                <span>社区公告</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/slideshow">
                <i class="el-icon-picture"></i>
                <span>轮播图</span>
              </el-menu-item>
            </el-submenu>
            <el-divider></el-divider>

            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-position"></i>
                <span>社区论坛管理</span>
              </template>
              <el-menu-item index="/sys-admin/forum">
                <i class="el-icon-position"></i>
                <span>社区论坛</span>
              </el-menu-item>
            </el-submenu>
            <el-divider></el-divider>

            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-s-comment"></i>
                <span>返乡报备管理</span>
              </template>
              <el-menu-item index="/sys-admin/returnHome">
                <i class="el-icon-s-comment"></i>
                <span>返乡报备</span>
              </el-menu-item>
            </el-submenu>
            <el-divider></el-divider>

            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-microphone"></i>
                <span>健康报备管理</span>
              </template>
              <el-menu-item index="7-1" disabled>
                <i class="el-icon-microphone"></i>
                <span>健康报备</span>
              </el-menu-item>
            </el-submenu>
            <el-divider></el-divider>

            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-s-unfold"></i>
                <span>外出报备管理</span>
              </template>
              <el-menu-item index="8-1" disabled>
                <i class="el-icon-s-unfold"></i>
                <span>外出报备</span>
              </el-menu-item>
            </el-submenu>
            <el-divider></el-divider>


            <el-submenu index="9">
              <template slot="title">
                <i class="el-icon-shopping-cart-full"></i>
                <span>商品代买管理</span>
              </template>
              <el-menu-item index="/sys-admin/purchase" disabled>
                <i class="el-icon-shopping-cart-2"></i>
                <span>商品代买</span>
              </el-menu-item>
            </el-submenu>
            <el-divider></el-divider>

            <el-submenu index="10">
              <template slot="title">
                <i class="el-icon-s-flag"></i>
                <span>商品配送管理</span>
              </template>
              <el-menu-item index="10-1" disabled>
                <i class="el-icon-s-flag"></i>
                <span>商品配送</span>
              </el-menu-item>
            </el-submenu>
            <el-divider></el-divider>

            <el-submenu index="11">
              <template slot="title">
                <i class="el-icon-mic"></i>
                <span>投诉信息管理</span>
              </template>
              <el-menu-item index="11-1" disabled>
                <i class="el-icon-mic"></i>
                <span>投诉信息</span>
              </el-menu-item>
            </el-submenu>
            <el-divider></el-divider>

          </el-menu>
        </el-aside>
        <el-main class="layout-main">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenuItemPath: '',
      admin: {},
    };
  },
  methods: {
    adminCenter() {
      this.$router.push('/sys-admin/center');
    },
    logout() {
      let url = 'http://localhost:8081/admin/logout';
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          localStorage.setItem('adminJwt','');
          this.$router.push('/login');
          this.$notify.success({
            title: '提示',
            message: '退出登录成功！',
            showClose: false,
            position: 'top-right'
          });
        }
      })
    },
    userIndex() {
      location.href = 'http://localhost:9000/user';
    },
    //加载当前管理员信息
    currentAdmin() {
      let url = 'http://localhost:8081/admin/currentAdmin';
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.admin = responseBody.data;
          console.log('admin = ', this.admin);
        } else {
          this.$router.push('/login');
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: false,
            position: 'top-right'
          });
          console.log(responseBody.message);
        }
      })
    },
  },
  created() {
    let adminJwt = localStorage.getItem('adminJwt');
    console.log('首页adminJwt = ', adminJwt);
  },
  mounted() {
    this.currentAdmin();
    let path = this.$router.currentRoute.path;
    if (path.startsWith('/sys-admin/center')) {
      this.activeMenuItemPath = '/sys-admin/center';
    } else {
      this.activeMenuItemPath = path;
    }
  },
}
</script>